<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<title>06CSS배경</title>

	</head>

	<body style="background-image: url('images/31.gif'); background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed">
		<h1>CSS배경</h1>
		<h2>배경이미지 띄우기 : background-image </h2>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/2.jpg')"> </div>
		
		<h2>배경이미지 반복 제어 : background-repeat</h2>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: no-repeat"> </div>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: repeat-x"> </div>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: repeat-y"> </div>

		<h2>배경이미지 위치지정 background-position</h2>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: no-repeat; background-position: center center"> </div>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: no-repeat; background-position: 250px 400px"> </div>
		<div style="width:1000px; height: 1500px; border: 1px solid red; background-image: url('images/1.jpg'); background-repeat: no-repeat; background-position: 50% 50%"> </div>

		<h2>배경이미지 고정하기 background-attachment</h2>
		
		<hr />
		<h2>배경이미지 관련 속성 단축형으로 쓰기</h2>
		<p>background : 색상, 이미지,반복여부,고정여부,위치</p>
		
		<div style="background: url('images/2.jpg')no-repeat 50% 50%; width: 550px; height: 750px; border: 1px solid navy"> </div>

	</body>
</html>
